<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理系统</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <!-- 引入自定义样式 -->
    <link rel="stylesheet" href="css/style.css">
    <!-- 在<head>标签内 -->
    <!-- toastify.js CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/toastify-js/1.12.0/toastify.css" rel="stylesheet">
    <!-- toastify.js JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/toastify-js/1.12.0/toastify.min.js"></script>
    <!-- Grid.js CSS -->
    <link href="https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />

    <!-- Grid.js JS -->
    <script src="https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.umd.js"></script>
</head>
<body>
<div class="container mt-5">
    <h1 class="text-center mb-4"><i class="fas fa-users text-primary me-2"></i> 用户管理系统</h1>
    <!-- ============ 顶部：标题 + 操作区 =========== -->
    <div class="row mb-4">
        <div class="col-12 d-flex justify-content-between align-items-center">
            <div>
                <h2 class="mb-0"><i class="fas fa-users text-primary me-2"></i> 用户管理</h2>
                <small class="text-muted">共 <span id="userCount">2</span> 条记录</small>
            </div>
            <div>
                <button class="btn btn-success" id="btnAddUser">
                    <i class="fas fa-plus-circle me-2"></i>新增用户
                </button>
                <button class="btn btn-outline-secondary ms-2" id="btnRefresh">
                    <i class="fas fa-sync-alt me-1"></i>刷新
                </button>
            </div>
        </div>
    </div>
    <!-- ============ 用户列表卡片 =========== -->
    
     <div class="row">
        <div class="col-12">
            <div class="card-header bg-white d-flex justify-content-between align-items-center border-bottom">
                <h5 class="mb-0">
                    <i class="fas fa-list-ul me-2"></i>
                    用户数据列表
                </h5>
                <div class="text-muted small">
                    <i class="fas fa-clock me-1"></i>
                    最后更新: <span id="lastUpdateTime">2025-09-09 15:30</span>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <!-- Grid.js 将挂载到这个 div -->
                    <div id="gridjs-container"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 引入 Bootstrap JS (含 Popper) -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.7/js/bootstrap.bundle.min.js"></script>
    <!-- 引入自定义JS -->
    <script src="js/main.js"></script>
</body>
</html>